import type { TabsProps } from 'antd';
import { Button, Card, Tabs, Tag, Typography, Affix } from 'antd';
import { useState } from 'react';
import styles from './index.less';

const { Paragraph } = Typography;
const Index: React.FC = () => {
  const [activeKey, setActiveKey] = useState('1');

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '介绍',
      children: 'Content of Tab Pane 1',
    },
    {
      key: '2',
      label: '目录',
      children: (
        <div className={styles.catalogWrap}>
          <div className={styles.cHeader}>
            集合内容<span>已完结</span>
          </div>
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((item) => {
            return (
              <div className={styles.cItem} key={item}>
                <div className={styles.serial}>1</div>
                <div className={styles.cTitleWrap}>
                  <div className={styles.cTitle}>为什么需要你自律</div>
                  <div className={styles.cAttribute}>学习时长: 4分15秒</div>
                </div>
              </div>
            );
          })}
        </div>
      ),
    },
  ];
  return (
    <div className={styles.bookWrapper}>
      <div className={styles.heardWrap}>
        <div className={styles.hLeft}>
          <img
            src="https://p26-passport.byteacctimg.com/img/user-avatar/71aa1c090fb874f351bb0f430d8cbbda~40x40.awebp"
            alt=""
          />
        </div>
        <div className={styles.hRight}>
          <div className={styles.hTitle}>
            <Tag color="#ee1111">新品</Tag>
            <div className={styles.titleName}>深入浅出的微前端</div>
          </div>
          <Paragraph
            className={styles.briefIntroduction}
            ellipsis={{ rows: 2, expandable: true, symbol: '更多' }}
          >
            微前端的技术深度相对于 React 或者 Vue
            框架要简单很多，但是它的广度却涵盖了前端知识的方方面面。本课程将会带你系统了解微前端的运行本质，有助于你在业务广度和技术深度上更进一层。
            微前端的技术深度相对于 React 或者 Vue
            框架要简单很多，但是它的广度却涵盖了前端知识的方方面面。本课程将会带你系统了解微前端的运行本质，有助于你在业务广度和技术深度上更进一层。
            微前端的技术深度相对于 React 或者 Vue
            框架要简单很多，但是它的广度却涵盖了前端知识的方方面面。本课程将会带你系统了解微前端的运行本质，有助于你在业务广度和技术深度上更进一层。
            微前端的技术深度相对于 React 或者 Vue
            框架要简单很多，但是它的广度却涵盖了前端知识的方方面面。本课程将会带你系统了解微前端的运行本质，有助于你在业务广度和技术深度上更进一层。
            微前端的技术深度相对于 React 或者 Vue
            框架要简单很多，但是它的广度却涵盖了前端知识的方方面面。本课程将会带你系统了解微前端的运行本质，有助于你在业务广度和技术深度上更进一层。
            微前端的技术深度相对于 React 或者 Vue
            框架要简单很多，但是它的广度却涵盖了前端知识的方方面面。本课程将会带你系统了解微前端的运行本质，有助于你在业务广度和技术深度上更进一层。
          </Paragraph>
          <div className={styles.authorInfo}>
            <div className={styles.aImg}>
              <img
                src="https://p26-passport.byteacctimg.com/img/user-avatar/71aa1c090fb874f351bb0f430d8cbbda~40x40.awebp"
                alt=""
              />
            </div>
            <div className={styles.aName}>lbb</div>
            <div className={styles.aPosition}>前端 @alibaba</div>
            <a className={styles.aGroup}>学习群</a>
          </div>
          <div className={styles.hFooter}>
            <Button type="primary">继续学习</Button>
            <div className={styles.bookAttribute}>
              <div>1348人加入学习</div>
              <div>17小节</div>
              <div>约3.7小时</div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.content}>
        <div className={styles.cLeft}>
          <Tabs
            activeKey={activeKey}
            defaultActiveKey="1"
            items={items}
            onChange={(e) => setActiveKey(e)}
          />
        </div>
        <Affix offsetTop={100}>
          <Card title="推荐书籍" className={styles.cRight} bordered={false} style={{ width: 300 }}>
            <div className={styles.recommendBookItem}>
              <div className={styles.rBookCover}>
                <img
                  src="https://p26-passport.byteacctimg.com/img/user-avatar/71aa1c090fb874f351bb0f430d8cbbda~40x40.awebp"
                  alt=""
                />
              </div>
              <div className={styles.rTitleWrap}>
                <Paragraph className={styles.rTitle} ellipsis={{ rows: 1 }}>
                  mySql是怎样练成的额mySql是怎样练成的额 mySql是怎样练成的额
                </Paragraph>
                <Paragraph className={styles.rSubTitle} ellipsis={{ rows: 3 }}>
                  mySql是怎样练成的额mySql是怎样练成的额mySql是怎样练成的额mySql是怎样练成的额mySql是怎样练成的额
                </Paragraph>
              </div>
            </div>
          </Card>
        </Affix>
      </div>
    </div>
  );
};

export default Index;
